<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:replace="~{/_include/header}" />
    <title>[[${bundle.L('图标')}]]</title>
    <style>
      #icons a {
        display: inline-block;
        width: 34px;
        height: 34px;
        text-align: center;
        border-radius: 4px;
      }
      #icons a i {
        font-size: 21px;
        line-height: 34px;
      }
      #icons a:hover {
        background-color: #4285f4;
      }
      #icons a:hover i {
        color: #fff;
      }
      #search-box {
        margin: 0 14px 14px;
      }
      #search-box > input {
        appearance: none !important;
        outline: none !important;
        border: 0 none;
        border-bottom: 1px solid #eee;
        padding: 2px 0;
      }
      #search-box > input:focus {
        border-color: #5f99f5;
      }
    </style>
  </head>
  <body class="dialog">
    <div class="main-content">
      <div id="search-box">
        <input class="w-100" th:placeholder="${bundle.L('搜索 (EN)')}" />
      </div>
      <div id="icons" class="text-center"></div>
    </div>
    <th:block th:replace="~{/_include/footer}" />
    <script th:src="@{/assets/js/zmdi-icons.js}"></script>
    <script th:src="@{/assets/js/mdi7-icons.js}"></script>
    <script type="text/babel">
      const cb = function (icon) {
        ;(parent && parent.clickIcon ? parent.clickIcon : console.log)(icon)
      }
      $(document).ready(() => {
        renderMdi7()
        parent && parent.RbModal && parent.RbModal.resize()

        window.bosskeyTrigger = function () {
          $('#icons').empty()
          $('#icons').text('ZMDI Loading')
          setTimeout(() => {
            $('#icons').empty()
            renderZmdi()
            parent && parent.RbModal && parent.RbModal.resize()
          }, 666)
        }

        let lastKey
        let lastTimer
        $('#search-box input').on('input', (e) => {
          if (lastKey === e.target.value) return
          lastKey = $trim(e.target.value)

          if (lastTimer) {
            clearTimeout(lastTimer)
            lastTimer = null
          }
          const lastKey2 = lastKey.toUpperCase()
          lastTimer = setTimeout(() => {
            $('#icons > a').each(function () {
              const $this = $(this)
              const title = $this.attr('title')
              if (!lastKey2 || title.includes(lastKey2)) $this.removeClass('hide')
              else $this.addClass('hide')
            })
            parent && parent.RbModal && parent.RbModal.resize()
          }, 200)
        })
      })

      // V1
      function renderZmdi() {
        $(ZMDI_ICONS).each(function () {
          if (!ZMDI_ICONS_IGNORE.contains(this + '')) {
            const $a = $(`<a data-icon="${this}" title="${this.toUpperCase()}"><i class="zmdi zmdi-${this}"></a>`).appendTo('#icons')
            $a.on('click', function () {
              cb($(this).data('icon'))
            })
          }
        })
      }
      // V2-4.0
      function renderMdi7() {
        MDI7_ICONS.forEach((icon) => {
          if (MDI7_ICONS_IGNORE.includes(icon)) return
          const $a = $(`<a data-icon="${icon}" title="${icon.toUpperCase()}"><i class="mdi ${icon}"></a>`).appendTo('#icons')
          $a.on('click', function () {
            cb($(this).data('icon'))
          })
        })
      }
    </script>
  </body>
</html>
